/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Toast from 'react-native-root-toast';
// import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
import ScrollableTabBar from './scrollableTabView/ScrollableTabBar';

import Head from './head.js';
import CockpitChart from './cockpitChart.js';
import NetErrorRefresh from './neterror.refresh.js';

let userAllConfig = [];
let cockpitChartPageView = <View></View>;

export default class Cockpit extends Component {
    constructor(props) {  
        super(props);
        this.state = {
            error: false,
            cockpitChartPageView: cockpitChartPageView,
            errorView: <View></View>,
        };
    }

    componentDidMount(){
        //加载用户配置
        this.loadUserAllConfig();
    }
  
    _onNetErrorRefresh(that){
        that._stopRotate();
        this.loadUserAllConfig();
    }

    loadUserAllConfig(){
        //查询用户配置
        let ret = cockpitGet.queryUserAllConfig(userid);
        ret.then((response) => response.json())
        .then((responseJson) => {
            if(responseJson.retcode == 0 || responseJson.retcode == '0'){
                
                //返回成功
                userAllConfig = responseJson.result;

                let cockpitCharts = [];

                userAllConfig.forEach((config_root) => {
                    cockpitCharts.push(<CockpitChart key={config_root.config_root_id} tabLabel={config_root.config_root_name} cindUserConfigVOs={config_root.cindUserConfigVOs}></CockpitChart>);
                });

                if (cockpitCharts.length == 0){
                    this.setState({
                        error: true,
                        errorView: <NetErrorRefresh text="请配置指标" onPress={(that)=>{this._onNetErrorRefresh(that)}}></NetErrorRefresh>
                    });
                } else {
                    cockpitChartPageView = <ScrollableTabView
                                        style={{marginTop: 0, }}
                                        initialPage={0}
                                        tabBarActiveTextColor={'#12b7f5'}
                                        tabBarInactiveTextColor ={'#00000080'}
                                        tabBarUnderlineStyle={{backgroundColor: '#12b7f5'}}
                                        renderTabBar={() => <ScrollableTabBar />}
                                        >
                                        
                                        {cockpitCharts}
                                        
                                </ScrollableTabView>
                    this.setState({
                        error: false,
                        cockpitChartPageView: cockpitChartPageView
                    });
                }
            }else{
                Toast.show(responseJson.retmsg == null ? "查询用户指标配置失败" : responseJson.retmsg, {duration: Toast.durations.SHORT, position: Toast.positions.CENTER});

                this.setState({
                    error: true,
                    errorView: <NetErrorRefresh onPress={(that)=>{this._onNetErrorRefresh(that)}}></NetErrorRefresh>
                });
            }
        })
        .catch((error) => {
            //Toast.show(error == null ? "系统异常" : JSON.stringify(error), {duration: Toast.durations.SHORT, position: Toast.positions.CENTER});
            Toast.show("请检查网络设置", {duration: Toast.durations.SHORT, position: Toast.positions.CENTER});

            this.setState({
                error: true,
                errorView: <NetErrorRefresh onPress={(that)=>{this._onNetErrorRefresh(that)}}></NetErrorRefresh>
            });
        });
    }
    
    render() {
        return (
            <View style={styles.container} >
                <View style={{height: 60}}>
                    <Head title='驾驶舱'></Head>
                    
                </View>

                {this.state.error ? this.state.errorView : this.state.cockpitChartPageView}

            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    tabText: {
        color: "#000000",
        fontSize: 13
    },
    selectedTabText: {
        color: "#999999",
        fontSize: 13
    },
    icon: {
        width: 20,
        height: 20
    }
});
